
<!-- 自定义 svg 图标组件 -->
<script setup lang="ts">
import "virtual:svg-icons-register";
import { computed } from "vue";
const props = defineProps<{
  icon: string, // 图标名字
  color?: string, // 图标颜色
  size?: number, // 图标大小
  width?: number  // 图标宽度
  height?: number // 图标高度
}>();

// 默认宽度
let rWidth: number = 20;
// 默认高度
let rHeight: number = 20;

let rColor = computed(() => {
  if (props.color) {
    return props.color;
  }
  // 默认颜色
  return "#616161";
});

if (props.width) {
  rWidth = props.width!;
} else if (props.size) {
  rWidth = props.size!;
}
if (props.height) {
  rHeight = props.height!;
} else if (props.size) {
  rHeight = props.size!;
}
const iconName = computed(() => `#icon-${props.icon}`);
</script>
<template>
  <svg class="dq-svg"
    :style="{ width: `${rWidth}px`, height: `${rHeight}px`, color: `${rColor === 'none' ? '' : rColor}` }"
    aria-hidden="true">
    <use :href="iconName" :fill="color" />
  </svg>
</template>

<style lang="scss">
.dq-svg {
  vertical-align: middle;
  outline: none;
}
</style>
